<template>
    <div class="search">
        <div class="search-header">
            <span class="iconfont icon-back" @click="back()">&#xe611;</span>
            <input type="text" class="search-input" placeholder="搜索商品名称" ref="gain">
            <span class="iconfont header-search-icon">&#xe651;</span>
        </div>
        <div class="content-wrapper">
            <div class="box">
                <span class="title">搜索历史</span>
                <span class="iconfont">&#xe6cd;</span>
                <div class="search-item-list">
                    <span class="search-item" v-for="item of searchItems" :key="item.id">{{item.keyword}}</span>
                </div>
            </div>

            <div class="box">
                <span class="title">搜索发现</span>
                <div class="discover-img">
                    <img class="full" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ffdfc8497cde4e74abe10b5190bd4976.jpg?w=984&h=160&bg=ED3C42">
                </div>
                <div class="discover-list">
                    <div class="discover-item" v-for="item of discoverItems" :key="item.id">
                        <span class="discover-item-title">{{item.title}}</span>
                        <img v-if="item.icon" class="discover-icon" :src="item.icon">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Search',
    data() {
        return {
            searchItems: [
                {
                    id:1,
                    keyword: '红米',
                },
                {
                    id:2,
                    keyword: '小米10'
                }
            ],
            discoverItems:[
                {
                    id:1,
                    title: '卡丁车'
                },
                {
                    id:2,
                    title: '手机选购指南',
                    icon:'https://m.mi.com/static/img/huodong.0318375176.png'
                },
            ]
        }
    },
    methods:{
        back() {
            this.$router.go(-1);
        }
    },
    mounted() {
        this.$refs.gain.focus();
    }
}
</script>

<style lang="stylus">

@import '../assets/css/theme.styl';

.search
    width:100%;
    .search-header
        height:48.3px;
        line-height 48.3px;
        display:flex;
        justify-content:space-between;
        align-items center;
        background $bgcolor
        .search-input
            display:inline-block;
            flex 1;
            height 36px;
            border 1Px solid #e5e5e5;
            text-indent 1em;
        .iconfont
            color #aaa;
            font-size:32px;
            width:48.3px;
            height:100%;
            display:inline-block;
        .icon-back
            transform rotate(-90deg)


.box
    position relative
    text-align:left;
    margin-top 30px;
    .title
        text-align:left;
        position relative;
        font-weight: 700;
        color #3c3c3c;
    .iconfont
        position:absolute;
        font-size:18px;
        right 0;
        top 0;
    .search-item-list
        display flex;
        justify-content flex-start;
        align-items center;
        margin-top:18px;
        font-size:14px;
        .search-item
            margin-right:15px;
            padding:10px 15px;
            border-radius:30px;
            background rgba(0,0,0,.04);
    .discover-img
        margin-top 15px;
        img
            display:inline-block;
            border-radius:5px;
    .discover-list
        margin-top 15px;
        display:flex;
        justify-content:flex-start;
        align-items center;
        padding:0 15px;
        .discover-item
            margin-right:15px;
            flex 0.5;
            .discover-icon
                margin-left 5px;
                width 30px;
                height 14px;

    
</style>